<template>
  <div>
    <h2 @click="changeData">修改name</h2>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const info = reactive({ name: "pengfan", age: 18 });

    //1.侦听watch时，传入getter函数
    watch(
      () => info.name,
      (neweValue, oldValue) => {
        console.log("newValue: ", neweValue, "oldValue: ", oldValue);
      }
    );
    const changeData = () => {
      info.name = "why";
    };

    // 2.传入一个可响应式对象：reactive对象/ref对象
    // 情况一：reactive对象获取到的newValue和oldValue本身都是reactive对象
    // watch(info, (newValue, oldValue) => {
    //   console.log("newValue: ", newValue, "oldValue: ", oldValue);
    // });
    //如果希望newValue和oldValue是一个普通的对象
    // watch(
    //   () => ({ ...info }),
    //   (newValue, oldValue) => {
    //     console.log("newValue: ", newValue, "oldValue: ", oldValue);
    //   }
    // );
    // const changeData = () => {
    //   info.name = "why";
    // };

    //情况二: ref对象获取newValue和oldValue是value值得本身(当数据不是引用数据类型时)
    // const name = ref("pengfan");
    // watch(name, (newValue, oldValue) => {
    //   console.log("newValue: ", newValue, "oldValue: ", oldValue);
    // });
    // const changeData = () => {
    //   name.value = "why";
    // };
    //传入的引用数据类型,是无法实现监听的，如果想实现监听,这时newValue和oldValue本身都是ref对象
    // const name = ref({name: "pengfan",age: "18"});
    // watch(name.value, (newValue, oldValue) => {
    //   console.log("newValue: ", newValue, "oldValue: ", oldValue);
    // });
    //如果希望newValue和oldValue是一个普通的对象
    // const name = ref({ name: "pengfan", age: "18" });
    // watch(
    //   () => ({ ...name.value }),
    //   (newValue, oldValue) => {
    //     console.log(newValue, "newValue");
    //     console.log(oldValue, "oldValue");
    //   }
    // );

    // const changeData = () => {
    //   name.value.name = "why";
    // };

    return {
      info,
      changeData,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>